<template>
  <cover-page
    @close="handleClose"
    :show="show"
    cardStyle="height: 80%;background:#f0f0f0"
  >
    <h2 style="text-align: center">游戏设置</h2>
    <div style="overflow-y: scroll; flex: 1">
      <van-collapse
        :border="false"
        v-model="showNames"
      >
        <van-collapse-item title="功能设置" name="fun">
          <van-cell title="记录成绩">
            <van-switch v-model="settings.saveScore" size="24px" />
          </van-cell>
            <van-field v-model="user.userName" label="用户名" placeholder="请输入用户名" :disabled="!settings.saveScore" input-align="right"/>
          <van-field
            :border="false"
            input-align="right"
            readonly
            clickable
            label="旋转方式"
            :value="controller[settings.controller - 1].name"
            @click="pickerCtrl = true"
          />
          <van-popup v-model="pickerCtrl" round position="bottom">
            <van-picker
              title="旋转方式"
              value-key="name"
              show-toolbar
              :default-index="settings.controller - 1"
              :columns="controller"
              @cancel="pickerCtrl = false"
              @confirm="confirmCtrl"
            />
          </van-popup>
          <van-notice-bar
            wrapable
            :scrollable="false"
            color="#1989fa"
            background="#ecf9ff"
            left-icon="info-o"
            >{{ controller[settings.controller - 1].detail }}</van-notice-bar
          >
          <van-cell title="旋转阻尼">
            <van-switch v-model="settings.staticMoving" size="24px" :disabled="settings.controller==2"/>
          </van-cell>
          <div class="title">
            <label>渲染帧数</label>
            {{ settings.fps }}fps
          </div>
          <van-slider
            style="margin:20px;width: calc(100% - 40px);"
            v-model="settings.fps"
            min="15"
            max="60"
            step="15"
            button-size="18"
          />
        </van-collapse-item>
        <van-collapse-item title="颜色设置" name="color">
          <div
            class="color_list"
            v-for="(list, index) in getColorList"
            :key="'list' + index"
          >
            <div
              class="color_item"
              v-for="item in list"
              :key="'color' + item.id"
              :style="item.id == themeColor.id ? 'background:lightgreen' : ''"
              @click="themeColor = item"
            >
              <div class="color_box" :style="'background:' + item.show"></div>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </van-collapse-item>
        <van-collapse-item title="字体设置" name="font">
          <van-field
            :border="false"
            input-align="right"
            readonly
            clickable
            label="字体选择"
            :value="themeFont.name"
            @click="pickerFont = true"
          />
          <van-popup v-model="pickerFont" round position="bottom">
            <van-picker
              title="字体选择"
              value-key="name"
              show-toolbar
              :default-index="themeFont.id"
              :columns="themeList.fonts"
              @cancel="pickerFont = false"
              @confirm="confirmFont"
            />
          </van-popup>
        </van-collapse-item>
        <van-collapse-item title="音乐设置" name="music">
          <van-field
            :border="false"
            input-align="right"
            readonly
            clickable
            label="背景音乐"
            :value="musicBgm.name"
            @click="pickerBgm = true"
          />
          <van-popup v-model="pickerBgm" round position="bottom">
            <van-picker
              title="背景音乐"
              value-key="name"
              show-toolbar
              :default-index="musicBgm.id"
              :columns="getBgmList"
              @cancel="pickerBgm = false"
              @confirm="confirmBgm"
            />
          </van-popup>
          <van-field
            :border="false"
            input-align="right"
            readonly
            clickable
            label="游戏音效"
            :value="musicGame.name"
            @click="pickerGame = true"
          />
          <van-popup v-model="pickerGame" round position="bottom">
            <van-picker
              title="游戏音效"
              value-key="name"
              show-toolbar
              :default-index="musicGame.id"
              :columns="musicList.game"
              @cancel="pickerGame = false"
              @confirm="confirmGame"
            />
          </van-popup>
        </van-collapse-item>
        <van-collapse-item
          title="灵敏度设置"
          name="sensitive"
          class="sensitive"
        >
          <div style="margin: 10px">
            <div class="title">
              <label>旋转灵敏度</label>
              {{ settings.sensitive.xz }}
            </div>
            <van-slider
              v-model="settings.sensitive.xz"
              min="0.1"
              max="5"
              step="0.1"
              button-size="18"
            />
            <div class="title">
              <label>缩放灵敏度</label>
              {{ settings.sensitive.sf }}
            </div>
            <van-slider
              v-model="settings.sensitive.sf"
              min="0"
              max="2"
              step="0.1"
              button-size="18"
            />
            <div class="title">
              <label>平移灵敏度</label>
              {{ settings.sensitive.py }}
            </div>
            <van-slider
              v-model="settings.sensitive.py"
              min="0"
              max="1"
              step="0.05"
              button-size="18"
            />
          </div>
        </van-collapse-item>
        <van-collapse-item title="偏好设置" name="other">
          <van-cell :title="settings.flagSchools?'插旗流':'盲扫流'">
            <van-switch v-model="settings.flagSchools" size="24px" @change="schoolsChange"/>
          </van-cell>
          <van-cell title="自动插旗">
            <van-switch v-model="settings.autoFlag" size="24px" :disabled="!settings.flagSchools"/>
          </van-cell>
          <van-cell title="长按进行插旗">
            <van-switch v-model="settings.flagPress" size="24px" :disabled="!settings.flagSchools"/>
          </van-cell>
          <van-cell title="数字可点击">
            <van-switch v-model="settings.clickNum" size="24px" :disabled="!settings.flagSchools"/>
          </van-cell>
          <van-cell title="背景色差">
            <van-switch v-model="settings.bgChange" size="24px"/>
          </van-cell>
          <van-cell title="菜单项提出">
            <van-switch v-model="settings.refreshBtn" size="24px" />
          </van-cell>
          <van-notice-bar
            color="#1989fa"
            background="#ecf9ff"
            left-icon="info-o"
            >菜单内按钮提到游戏页面</van-notice-bar
          >
          <van-cell title="结束弹窗">
            <van-switch v-model="settings.dialog" size="24px" />
          </van-cell>
          <van-notice-bar
            color="#1989fa"
            background="#ecf9ff"
            left-icon="info-o"
            >游戏结束后是否出现弹窗</van-notice-bar
          >
          
        </van-collapse-item>
        <van-cell value="介里到底了ヽ(￣▽￣)ﾉ" />
      </van-collapse>
    </div>
    <div class="btn_box">
      <van-button plain type="info" @click="handleClose">返 回</van-button>
      <van-button type="info" @click="handleSave">确 认</van-button>
    </div>
  </cover-page>
</template>

<script>
import coverPage from "../../components/coverPage.vue";
import themeList from "@/assets/json/theme.json";
import musicList from "@/assets/json/music.json";
export default {
  name: "settingCard",
  props: ["show"],
  components: { coverPage },
  data() {
    return {
      themeList,
      musicList,
      egg:null,
      showNames: ["fun", "color", "font", "music", "sensitive", "other"],
      themeColor: undefined,
      themeFont: undefined,
      musicBgm: undefined,
      musicGame: undefined,
      settings: undefined,
      user:undefined,
      pickerCtrl: false,
      pickerFont: false,
      pickerBgm: false,
      pickerGame: false,
      controller: [
        {
          id: 1,
          name: "轨迹球控制器",
          detail: "可以使得相机绕过“北极”和“南极”围绕目标进行轨道运动。",
        },
        {
          id: 2,
          name: "轨道控制器",
          detail: "可以使得相机保持朝上的同时围绕目标进行轨道运动。",
        },
      ],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.themeColor = { ...this.$store.getters.getByState("themeColor") };
      this.themeFont = { ...this.$store.getters.getByState("themeFont") };
      this.musicBgm = { ...this.$store.getters.getByState("musicBgm") };
      this.musicGame = { ...this.$store.getters.getByState("musicGame") };
      this.user = {...this.$store.getters.getByState("user")}
      this.settings = JSON.parse(
        JSON.stringify(this.$store.getters.getByState("settings"))
      ); //深拷贝
    },
    confirmCtrl(value) {
      this.settings.controller = value.id;
      this.pickerCtrl = false;
    },
    confirmFont(value) {
      this.themeFont = value;
      this.pickerFont = false;
    },
    confirmBgm(value) {
      this.$store.getters.getByState("musicCtrl").playBgmAudio(value);
      this.musicBgm = value;
      this.pickerBgm = false;
    },
    confirmGame(value) {
      this.$store.getters
        .getByState("musicCtrl")
        .playGameAudio({ musicGame: value, type: "introduce" });
      this.musicGame = value;
      this.pickerGame = false;
    },
    handleClose() {
      //恢复之前播放的音乐
      if (this.$store.getters.getByState("musicBgm").id != this.musicBgm.id) {
        this.$store.getters.getByState("musicCtrl").playBgmAudio();
      }
      this.initData();
      this.$emit("close");
    },
    handleSave() {
      this.$store.commit("setState", {
        key: "themeColor",
        data: this.themeColor,
        save: true,
      });
      this.$store.commit("setState", {
        key: "themeFont",
        data: this.themeFont,
        save: true,
      });
      this.$store.commit("setState", {
        key: "musicBgm",
        data: this.musicBgm,
        save: true,
      });
      this.$store.commit("setState", {
        key: "musicGame",
        data: this.musicGame,
        save: true,
      });
      this.$store.commit("setState", {
        key: "user",
        data: this.user,
        save: true,
      });
      this.$store.commit("setState", {
        key: "settings",
        data: this.settings,
        save: true,
      });
      this.$emit("close");
    },
    schoolsChange(value){
      if(!value){
        //与插旗有关算法已关闭
        this.$toast({
          message: '与插旗有关算法已关闭',
          position: 'bottom',
        });
      }else{
        this.$toast({
          message: '与插旗有关算法已启用',
          position: 'bottom',
        });
      }
    }
  },
  computed: {
    getColorList: function () {
      let list = [];
      let ll = [];
      let count = 0;
      for (let item of this.themeList.colors) {
        if (count != 1) {
          ll.push(item);
          count++;
        } else {
          ll.push(item);
          list.push(ll);
          ll = [];
          count = 0;
        }
      }
      if (ll.length > 0) {
        list.push(ll);
      }
      return list;
    },
    getBgmList: function (){
      let list = []
      let egg
      if(!this.egg){
        egg = localStorage['egg']
        if(egg){
          egg = JSON.parse(egg)
          this.egg = egg
        }
      }else{
        egg = this.egg
      }
      for(let bgm of this.musicList.bgm){
        if(bgm.hidden){
          let hide = true
          if(egg){
            for(let item of egg){
              if(item == '风之小径'){
                hide = false
                break
              }
            }
          }
          if(!hide){
            list.push(bgm)
          }
        }else{
          list.push(bgm)
        }
      }
      // console.log(list);
      return list
    }
  },
  watch:{
    user:{
      handler(){
        let name = this.user.userName
        if(name=='风之小径'){ //可以直接在if的条件加彩蛋
          let egg = localStorage['egg']
          egg ? egg = JSON.parse(egg) : egg = []
          let add = true
          for(let item of egg){
            if(item == name){
              add = false
              break
            }
          }
          if(add){
            egg.push(name)
            this.egg = egg
          }
          this.$toast({message:'egg:'+name,position:'bottom'})
          localStorage['egg'] = JSON.stringify(egg)
        }
      },
      deep:true
    }
  }
};
</script>

<style lang="scss" scoped>
.color_list {
  display: flex;
  .color_item {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 5px;
    margin-right: 5px;
    border: gray solid 2px;
    border-radius: 5px;
    color: black;
    .color_box {
      width: 24px;
      height: 24px;
      margin-right: 5px;
    }
  }
}

.title {
  margin: 0 10px;
  display: flex;
  label {
    flex: 1;
  }
}
.van-slider {
  margin: 20px 0;
}
.btn_box {
  display: flex;
  .van-button {
    flex: 1;
    margin: 10px;
  }
}
</style>